<template>
  <div class="shopbuy">
    <div class="header">
      <table>
        <tr>
          <td>
            <span>服务器：</span>
            <Server ref="ServerChild" :showServer="showServer" />
          </td>
          <td>
            <span>开始时间：</span>
            <el-date-picker
              v-model="first_time"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </td>
          <td>
            <span>结束时间：</span>
            <el-date-picker
              v-model="last_time"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </td>
          <td>
            <span>商店类别：</span>
            <el-select v-model="shop_id" placeholder="商店类别">
              <el-option
                v-for="item in shoptype"
                :label="item.label"
                :key="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </td>
          <td>
            <el-button type="primary" @click="search()">查询</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main v-loading="loading">
        <el-table
          border
          :fit="true"
          @sort-change="sortChange"
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px',
          }"
          :data="tableData.slice((page_index - 1) * page_size,page_index * page_size)"
        >
          <el-table-column
            prop="server_id"
            sortable
            label="服务器"
          ></el-table-column>
          <el-table-column
            prop="shop_type"
            sortable
            label="商店类别"
          ></el-table-column>
          <el-table-column
            prop="product_name"
            sortable
            label="物品名称"
          ></el-table-column>
          <el-table-column
            prop="money_type"
            sortable
            label="货币种类"
          ></el-table-column>
          <el-table-column
            prop="money_cost"
            sortable
            label="货币价格"
          ></el-table-column>
          <el-table-column
            prop="gm_count"
            sortable="custom"
            label="购买次数"
          ></el-table-column>
          <el-table-column
            prop="money_consume"
            sortable
            label="货币消耗占比"
          ></el-table-column>
        </el-table>
        <pageNation
          :total="tableData.length"
          :page-size="page_size"
          @pageChange="pageChange"
          :page_index="page_index"
        />
      </el-main>
    </div>
  </div>
</template>
<script>
import Server from "../../components/server/Server.vue";
import pageNation from "../../components/pagenation/pageNation";
import shoptype from "../../config/shoptype";
import {sortFun} from "../../utils/index"
let map = new Map();
export default {
  name: "ShopBuy",
  components: { Server, pageNation },
  data() {
    return {
      showServer: false,
      tableData: [],
      first_time: "",
      last_time: "",
      loading: false,
      shop_id: "",
      page_index: 1, // 页数
      page_size: 10,
      shoptype: shoptype,
    };
  },
  mounted() {
    //获取服务器名称
    this.first_time = window.localStorage.getItem("first_time");
    this.last_time = window.localStorage.getItem("last_time");
    this.$http.get("/api/gmtool/getServer").then((res) => {
      res.data.result.forEach((item) => {
        map.set(item.serverId, item.serverName);
      });
    });
  },
  methods: {
    //分页
    pageChange(item) {
      this.page_index = item.page_index;
      this.page_size = item.page_limit;
    },
    //排序
    sortChange(column, prop, order) {
      if (column.prop === "gm_count") {
        this.tableData = this.tableData.sort(
          sortFun(column.prop, column.order === "ascending")
        );
      }
    },
    //查询商品购买信息
    search() {
      var last_time = this.last_time;
      var first_time = this.first_time;
      var serverIdArr = this.$refs.ServerChild.serverIdArr;
      window.localStorage.setItem("last_time", last_time);
      window.localStorage.setItem("first_time", first_time);
      var arr = [];
      if (serverIdArr.length===0) {
        this.$message({ type: "warning", message: "请选择服务器" });
        return;
      }
      if (this.shop_id == "") {
        this.$message({ type: "warning", message: "请选择商店类别" });
        return;
      }
      if (first_time / 1000 == "") {
        this.$message({ type: "warning", message: "请输入开始时间" });
        return;
      }
      if (last_time / 1000 == "") {
        this.$message({ type: "warning", message: "请输入结束时间" });
        return;
      }
      serverIdArr.forEach((itemserver) => {
        if (itemserver == "全选") {
          return;
        } else {
          this.loading = true;
          this.$http.post("/api/payment/shopbuy", {
              last_time: this.last_time / 1000,
              first_time: this.first_time / 1000,
              shop_id: this.shop_id,
              server_id: itemserver,
          }).then((res) => {
              if (res.data.code === 200) {
                res.data.result.forEach((item) => {
                  let obj = {
                    server_id: map.get(item.server_id),
                    product_name: item.product_name,
                    shop_type: item.shop_type,
                    money_type: item.money_type,
                    money_cost: item.money_cost,
                    gm_count: item.gm_count,
                    money_consume: item.money_consume,
                  };
                  arr.push(obj);
                });
                this.tableData = arr;
                this.loading = false;
              } else {
                this.loading = false;
                return;
              }
            });
        }
      });
    }
  }
}
</script>
<style scoped>
/* 局部样式 */
.shopbuy {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.shopbuy td {
  padding: 18px;
  font-size: 14px;
  display: flex;
  float: left;
}
</style>